<template>
  <div class="">
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <heading grade="1">{{ (!id ? '新建' : '修改') + '赞助品牌'}}</heading>
      <el-form ref="form" :rules="rules" v-bind="getFormProps(({labelWidth:'150px'}))" class="train-form">
        <el-form-item label="品牌名称：" prop="brandName" :rules="{ required: true, message: '品牌名称不能为空'}">
          <el-col :span="20">
            <x-input v-model="form.brandName" placeholder="请输入品牌名称" :maxlength="40" :disabled="id?true:false"></x-input>
          </el-col>
        </el-form-item>
        <el-form-item label="品牌类型：" prop="brandType" :rules="{ required: true, message: '请至少选择一个品牌类型'}">
          <el-col :span="20">
            <el-select
              :disabled="id?true:false"
              class="input-block"
              v-model="form.brandType"
              multiple
              filterable
              placeholder="请至少选择一个品牌类型">
              <el-option
                v-for="item in brandType.data"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="品牌简介：" prop="brandIntro" :rules="{ required: true, message: '品牌简介不能为空'}">
          <el-col :span="20">
            <x-input
              type="textarea"
              :autosize="{ minRows: 3}"
              :maxlength="300"
              placeholder=" "
              v-model="form.brandIntro" />
          </el-col>
        </el-form-item>
        <el-form-item label="品牌LOGO："
                      prop="brandLogo"
                      :rules="[
           { required: true, message: '请上传品牌LOGO'},
         ]">
            <img-upload v-model="form.brandLogo" class="logo-upload" />
            <span class="form-help">点击可以显示大图 (建议大小：400*300)</span>
        </el-form-item>
        <el-form-item label="联系人 ：" prop="contactMan" :rules="[{ required: true, message: '联系人不能为空'},{min: 2, max: 40, message: '请输入全名'}]">
          <el-col :span="12">
            <el-input type="text" :maxlength="40" :minlength="2" placeholder="请输入联系人姓名" v-model="form.contactMan">
            </el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="联系电话 ：" prop="contactPhone" :rules="[{ required: true, message: '电话号码不能为空'},validator.rule.isPhone]">
          <el-col :span="12">
            <el-input type="text" :maxlength="11" placeholder="请输入联系电话" v-model="form.contactPhone">
            </el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="24" class="train-agree">
            <el-checkbox v-model="form.contactOpen">联系方式对外公开</el-checkbox>
          </el-col>
        </el-form-item>
        <div class="button-box">
          <el-button type="primary" :loading="loading" native-type="submit">确认提交</el-button>
          <el-button v-if="id" @click="submit(3)">放弃修改</el-button>
          <!--<el-button v-if="!id" @click="submit(0)">保存草稿</el-button>-->
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  import ImgUpload from '../../components/ImgUpload'
  import api from 'api/brand'
  import validator from 'utils/validator'
  import {form} from 'utils/mixins' // 引入form mixin
  export default {
    mixins: [form],
    components: {
      ImgUpload
    },
    data () {
      let isCertify
      return {
        isCertify,
        id: this.$route.params.id,
        loading: false,
        rules: {},
        validator,
        brandType: [],
        form: {
          brandName: '', // 品牌名称
          brandType: [], // 品牌类型
          brandIntro: '', // 品牌简介
          brandLogo: '', // 品牌LOGO
          contactMan: '', // 联系人
          contactPhone: '', // 联系电话
          contactOpen: '' // 是否对外公开
        }
      }
    },
    mounted () {
      this.brandTypeFn()
      if (this.id) { // 如果有id,即点编辑的时候带过来的id，即是做编辑操作，才执行getdetailed编辑操作
        this.getdetailed(this.id)
      }
    },
    methods: {
      getdetailed (id) { // 招商计划列表-详情,即点编辑的时候，后台所返回的数据需要被填充到表单里的
        api.brand_detailed({brandId: id}).then((res) => {
          if (res.data.auditStatus === 1) this.$router.push({path: '/sponsor/brand'})
          if (res.data.contactOpen) { // 后台返回的contactOpen是1，0，此处要做转换操作，换成true,false操作
            res.data.contactOpen = true
          } else {
            res.data.contactOpen = false
          }
          for (var attr in this.form) { // 将返回来的数据做跟我的form里面的数据要一一对应进来，只拿form所需要的数据
            this.form[attr] = res.data[attr]
          }
        }, () => { // 错误回调，将跳转到品牌列表页
          this.$router.push({path: '/sponsor/brand'})
        })
      },
      submit (type = 1) {
        if (type === 3) { // type === 3 即放弃修改，将跳转到品牌列表页
          this.$router.push({path: '/sponsor/brand'})
          return
        }
        if (type === 1) { // 点击确认提交的操作
          if (this.id) { // 如果有this.id 则说明是编辑状态
            let formdata = Object.assign({}, this.form) // 复制一个新的数据对象
            formdata.contactOpen = formdata.contactOpen ? 1 : 0
            formdata.id = this.id // 默认的参数中是没有id的，但是编辑页需要把id新添加到formdata作为参数传过去
            delete formdata.brandName // 编辑状态，删除多余不需要传的参数
            delete formdata.brandType
            api.brand_edit(formdata, {contexts: this, successMsg: 'none'}).then(res => {
              this.handleSubmitSuccess(type, this.id)
            })
          } else { // 没有this.id 则说明是添加状态
            let formdata = Object.assign({}, this.form)
            formdata.contactOpen = formdata.contactOpen ? 1 : 0
            api.brand_add(JSON.stringify(formdata), {contexts: this, successMsg: 'none'}).then(res => {
              this.handleSubmitSuccess(type, this.id)
            })
          }
        }
      },
      handleSubmitSuccess (type, id) { // 弹窗的信息
        let that = this
        let text = [
          {
            title: (id ? '修改' : '新建') + '品牌草稿成功!',
            text: '草稿已保存到品牌列表中！'
          },
          {
            title: (id ? '修改' : '新建') + '品牌成功!',
            text: '我们会在2-3个工作日内完成审核,请您耐心等待！'
          }
        ]
        this.$confirm(text[type].text, text[type].title, { // 执行成功的回调
          type: 'success',
          showCancelButton: false,
          callback () {
            that.$router.push({path: '/sponsor/brand'})
          }
        })
      },
      brandTypeFn () { // 品牌类型下拉的数据
        api.brand_type({
        }).then(res => {
          this.brandType = res
        })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">

</style>
